<template>
  <view class="profile-container">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部用户信息区域 -->
    <view class="header-section">
      <view class="user-info">
        <image class="user-avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
        <view class="user-details">
          <text class="username">{{ userInfo.username || '张毅' }}</text>
          <text class="phone">{{ userInfo.phone || '18893209839' }}</text>
        </view>
      </view>
      <view class="header-actions">
        <uni-icons type="gear" size="24" color="#fff" @click="handleSettings"></uni-icons>
      </view>
    </view>

    <!-- 优惠券卡片 -->
    <view class="coupon-card">
      <view class="coupon-info">
        <text class="coupon-label">优惠券</text>
        <text class="coupon-count">{{ couponCount }}张</text>
      </view>
    </view>

    <!-- 我的订单 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">我的订单</text>
        <view class="section-more" @click="handleAllOrders">
          <text class="more-text">全部订单</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <view class="order-status-list">
        <view 
          class="order-status-item" 
          v-for="(item, index) in orderStatusList" 
          :key="index"
          @click="handleOrderStatus(item)"
        >
          <view class="status-icon">
            <uni-icons :type="item.icon" size="28" color="#666"></uni-icons>
          </view>
          <text class="status-text">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 我的服务 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">我的服务</text>
      </view>
      
      <view class="service-grid">
        <view 
          class="service-item" 
          v-for="(item, index) in serviceList" 
          :key="index"
          @click="handleService(item)"
        >
          <view class="service-icon" :style="{ background: item.color }">
            <uni-icons :type="item.icon" size="24" color="#fff"></uni-icons>
          </view>
          <text class="service-text">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-section">
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </view>

    <!-- 底部安全区域 -->
    <view class="safe-area-bottom"></view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const statusBarHeight = ref(0)
const userInfo = ref({})
const couponCount = ref(3)

const orderStatusList = ref([
  { id: 1, name: '待支付', icon: 'wallet', status: 'pending' },
  { id: 2, name: '待使用', icon: 'calendar', status: 'unused' },
  { id: 3, name: '待评价', icon: 'chatbubble', status: 'evaluate' }
])

const serviceList = ref([
  { id: 1, name: '领券中心', icon: 'gift', color: '#FF9500', url: '/pages/coupon/coupon' },
  { id: 2, name: '邀请好友', icon: 'person-add', color: '#007AFF', url: '/pages/invite/invite' },
  { id: 3, name: '我的车辆', icon: 'car', color: '#34C759', url: '/pages/vehicle/vehicle' },
  { id: 4, name: '消费记录', icon: 'list', color: '#5AC8FA', url: '/pages/consumption/consumption' },
  { id: 5, name: '我的维修', icon: 'construct', color: '#FF3B30', url: '/pages/repair/repair' },
  { id: 6, name: '意见反馈', icon: 'chatboxes', color: '#AF52DE', url: '/pages/feedback/feedback' },
  { id: 7, name: '收货地址', icon: 'location', color: '#FF9500', url: '/pages/address/address' }
])

// 方法
const handleSettings = () => {
  uni.navigateTo({
    url: '/pages/settings/settings'
  })
}

const handleAllOrders = () => {
  uni.navigateTo({
    url: '/pages/orders/orders'
  })
}

const handleOrderStatus = (item) => {
  uni.navigateTo({
    url: `/pages/orders/orders?status=${item.status}`
  })
}

const handleService = (item) => {
  if (item.url) {
    uni.navigateTo({
      url: item.url
    })
  } else {
    uni.showToast({
      title: `点击了${item.name}`,
      icon: 'none'
    })
  }
}

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除本地存储的用户信息
        uni.removeStorageSync('userInfo')
        
        uni.showToast({
          title: '已退出登录',
          icon: 'success'
        })
        
        // 跳转到登录页
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/login/login'
          })
        }, 1500)
      }
    }
  })
}

// 生命周期
onMounted(() => {
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
  
  // 获取用户信息
  const storedUserInfo = uni.getStorageSync('userInfo')
  if (storedUserInfo) {
    userInfo.value = storedUserInfo
  }
  
  // 模拟获取优惠券数量
  getCouponCount()
})

const getCouponCount = async () => {
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 500))
    couponCount.value = 3
  } catch (error) {
    console.error('获取优惠券数量失败:', error)
  }
}
</script>

<style scoped>
.profile-container {
  background: #f5f5f5;
  min-height: 100vh;
}

.status-bar {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
}

.header-section {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  padding: 30rpx 40rpx 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8rpx;
}

.phone {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

.header-actions {
  padding: 20rpx;
}

.coupon-card {
  background: #fff;
  margin: -30rpx 40rpx 30rpx;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.coupon-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.coupon-label {
  font-size: 32rpx;
  color: #333;
}

.coupon-count {
  font-size: 36rpx;
  font-weight: bold;
  color: #4A90E2;
}

.section {
  background: #fff;
  margin: 0 40rpx 30rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.section-more {
  display: flex;
  align-items: center;
}

.more-text {
  font-size: 28rpx;
  color: #999;
  margin-right: 8rpx;
}

.order-status-list {
  display: flex;
  justify-content: space-around;
}

.order-status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.status-icon {
  width: 80rpx;
  height: 80rpx;
  background: #f8f8f8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.status-text {
  font-size: 26rpx;
  color: #333;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40rpx 20rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.service-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.service-text {
  font-size: 26rpx;
  color: #333;
}

.logout-section {
  padding: 0 40rpx 40rpx;
}

.logout-btn {
  width: 100%;
  height: 88rpx;
  background: #fff;
  border: none;
  border-radius: 44rpx;
  color: #4A90E2;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.safe-area-bottom {
  height: env(safe-area-inset-bottom);
}
</style>
